<template>
  <div class="detail-table">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 歌曲 -->
      <el-tab-pane :label="'歌曲列表'+'('+musicList.length+')'" name="first">
        <el-table :data="musicList" style="width: 100%" border @row-click="playMusic">
          <el-table-column type="index" label="#" align="center">
          </el-table-column>

          <el-table-column label="#" width="150px" align="center">
            <template v-slot="scope">
              <img :style="{ width: '110px' }" v-lazy="scope.row.al.picUrl" alt="" />
            </template>
          </el-table-column>

          <el-table-column label="音乐标题" align="center">
            <template v-slot="scope">
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>

          <el-table-column label="歌手" prop="ar[0].name" align="center">
          </el-table-column>

          <el-table-column label="专辑" prop="al.name" align="center">
          </el-table-column>

          <el-table-column label="时长" align="center">
            <template v-slot="scope">
              <span>{{scope.row.dt | formatDuration}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 评论 -->
      <el-tab-pane :label="'评论列表（'+(newComment.total+hotComment.total)+'）'" name="second">
        <div class="add-message box">
          <textarea name="add" id="add" cols="30" rows="10" width="100%" autofocus v-model="commendText"></textarea>
          <el-button type="primary" @click="publishCommend">发送</el-button>
        </div>
        <recommend title="精彩评论" :recommendData="hotComment.list" />

        <div class="loadMore" v-show="hotComment.total !== 0">
          <el-button @click="loadMore">
            <span>加载更多精彩评论</span>
            <i class="iconfont icon-youjiantou"></i>
          </el-button>
        </div>

        <recommend title="最新评论" :recommendData="newComment.list" />
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="num" :page-sizes="[15, 30, 60, 100]" :page-size="queryInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="newComment.total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 收藏着 -->
      <el-tab-pane label="收藏着" name="third">
        <div class="colleter-group">
          <ul>
            <li v-for="item in subscribers.list" :key="item.userId">
              <div class="user-img">
                <img :src="item.avatarUrl" alt="">
              </div>
              <div class="user-dec">
                <span>{{item.nickname}}</span>
                <i class="iconfont icon-male" style="color: cyan" v-if="item.gender===1"></i>
                <i class="iconfont icon-female" style="color: hotpink" v-else></i>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getPopularCommend, getNewCommend, getCommend, getColletor } from '@/api/songrc'

import Recommend from '@/components/content/Recommend'
export default {
  name: 'DetailTable',
  props: {
    musicList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  created() {
    this.queryInfo.id = window.sessionStorage.getItem('id')
    this.getHotCommendData()
    this.getCommend()
    this.getSonggetColletor()
  },
  data() {
    return {
      // tab栏默认显示哪一个
      activeName: 'first',
      queryInfo: {
        id: 0,
        type: 2,
        limit: 15,
        offset: 0
      },
      // 收集者
      subscribers: {
        list: [],
        total: 0
      },
      // 热门评论
      hotComment: {
        list: [],
        total: 0
      },
      // 最新评论
      newComment: {
        list: [],
        total: 0
      },
      // 双向绑定textarea
      commendText: '',
      commentInfo: {
        id: this.$route.params.id,
        content: '',
        action: 1,
        type: 2
      },
      // 页数
      num: 1
    }
  },
  methods: {
    // 热门评论
    async getHotCommendData() {
      const { data: res } = await getPopularCommend(this.queryInfo)
      this.hotComment.list = res.hotComments
      this.hotComment.total = res.total
    },
    // 最新评论
    async getCommend() {
      const { data: res } = await getNewCommend(this.queryInfo)
      this.newComment.list = res.comments
      this.newComment.total = res.total
    },
    // 发表评论
    async publishCommend() {
      const token = window.sessionStorage.getItem('token')
      if (token) {
        if (this.commendText.trim() === '') {
          this.$message.info('请在评论框中输入内容')
        }
        else {
          const { data: res } = await getCommend(this.commentInfo)
          console.log(res)
          if (res.code !== 200 || res.code !== 201) {
            return this.$message.error('发送失败!')
          } else {
            return this.$message.success('发送成功!')
          }
        }
      }
      else {
        this.$message.error('请先登录再评论')
      }
    },
    // 加载更多评论
    loadMore() {

    },
    // 更改总页数触发
    handleSizeChange(page) {
      this.queryInfo.limit = page
      console.log(page)
    },
    // 更改页码触发
    handleCurrentChange(num) {
      console.log(num)
      this.queryInfo.offset = (num - 1) * this.queryInfo.limit
      this.getCommend()
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 获取歌单收集者
    async getSonggetColletor() {
      const { data: res } = await getColletor(this.queryInfo.id, 200)
      this.subscribers.list = res.subscribers
      this.subscribers.total = res.total
      console.log(res)
    }
  },
  components: {
    Recommend
  }
}
</script>

<style lang="less" scoped>
.add-message {
  width: 95%;
  margin: 10px 30px;
  box-sizing: border-box;
  textarea {
    width: 100%;
    // 禁止用户拖拽
    resize: none;
    outline: none;
    padding: 8px 10px;
  }
  .el-button {
    float: right;
    margin-top: 8px;
  }
}
.loadMore {
  text-align: center;
  .el-button {
    border-radius: 20px;
  }
}
.el-pagination {
  text-align: center;
}
.colleter-group {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 22%;
      display: flex;
      font-size: 16px;
      align-items: center;
      margin: 10px;
      .user-img {
        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .user-dec {
        flex: 1;
        display: flex;
        justify-content: space-between;
        i {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>